<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>商品列表</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        /*//头部*/
        .aui-tab-nav li.active {
            color: #327afa;
            border-bottom: 2px #327afa solid;
        }
        .iConent:before {
            content: "\e700" !important;
        }
        .aui-tab-nav li {
            font-size:15px;
            border-bottom:1px dotted #eee;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">
        商品列表
    </div>
    <ul class="aui-tab-nav aui-border-t">
        <li class="active" data-type="1" tapmode onclick="switchChange(this)">
            综合
        </li>
        <li data-type="2" tapmode onclick="switchChange(this)">
            新品
        </li>
        <li data-type="3" tapmode onclick="switchChange(this)">
            销量
        </li>
        <li data-type="4" tapmode onclick="switchChange(this)">
            价格
        </li>
        <li tapmode onclick="changeView(this)" view-type="bigPic">
            <i class="aui-iconfont aui-icon-cascades icon-left-coler"></i>
        </li>
    </ul>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var brand = api.pageParam.brand;
        var header = $api.dom('header');
        $api.fixIos7Bar(header);
        
        var header_h = $api.offset(header).h;
        var body_h = $api.offset($api.dom('body')).h - header_h;
        api.openFrame({
            name : 'brandList_frm',
            url : 'brandList_frm.html',
            rect : {
                x : 0,
                y : header_h,
                w : 'auto',
                h : body_h
            },
            pageParam : {
                brand : brand
            },
            bounces : true,
            vScrollBarEnabled : false,
            hScrollBarEnabled : false
        });

        if(api.pageParam.brandName){
            $('.aui-title').text(api.pageParam.brandName);
        }
    }

    function switchChange(obj) {
        $('.aui-tab-nav li').removeClass('active');
        $(obj).addClass('active');
        var type = $(obj).attr('data-type');
        api.sendEvent({
            name: 'brandType',
            extra: {
                brandType: type
            }
        })
    }
    function changeView(obj) {
        var viewType = $(obj).attr("view-type");

        api.execScript({
            frameName: 'brandList_frm',
            script: 'changeView("'+viewType+'")'
        });

        if (viewType == "bigPic") {
            //一行两列
            $(obj).attr("view-type", "smallPic");
        } else if (viewType == "smallPic") {
            //一行一列
            $(obj).attr("view-type", "bigPic");
        }
    }
</script>
</html>
